<template>
<section>
    <header class="header">
        <h1>我的记事本</h1>
        <input placeholder="请输入文本" class="new-todo" v-model="text">
        <button class="add" @click="onadd">添加文本</button>
    </header>
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in booklist">
                <div class="view">
                    <span class="index">{{ index+1 }}</span>
                    <label>{{ item.name }}</label>
                    <button class="destory"></button>
                </div>
            </li>
        </ul>
    </section>
    <footer class="footer">
        <span class="todo-count">
            >合计:<strong>{{ booklist.length }}</strong>
        </span>
        <button class="clear-completed" @click="onclear">
            清空任务
        </button>
    </footer>
</section>
</template>

<script setup>
    import "./index.css"        
    import { ref } from "vue";
    let text=ref("")
    let booklist=ref([
        {id:125,name:"艾尔登法环",finished:false},
        {id:125,name:"英雄联盟",finished:false},
        {id:125,name:"塞尔达传说",finished:false},
    ])
    let onadd=()=>
    {
        let name1=text.value.trim();
        if(!name1)
        {
            return alert("名称不能为空")
        }
        booklist.value.push({
            name:name1,
            id:Date.now(),
            finished:false
        })
        text.value="";
    }
    let ondel=(i)=>{
        if(confirm("Are you sure??"))
        {
            booklist.value.splice(i,1);
        }
    }
    let onclear=()=>
    {
        booklist.value=[];
    }
</script>
